<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JSX插值表达式</title>
	</head>
	<body>
		<div id="app"></div>
		
		<script src="./js/react17.development.js"></script>
		<script src="./js/react-dom17.development.js"></script>
		<script src="./js/babel.min.js"></script>
		<script type="text/babel">
			// 模拟数据
			let user = {
				username: "大牧",
				age: 22
			}
			
			// JSX输出数据
			let div = 	<div>
							<p>姓名: { user.username  }</p>
							<p>年龄: { user.age }</p>
							<p>普通文本: { user.age > 18 ? '成年' : '未成年'}</p>
							<div>JSX结构: {
											user.age > 18 ?
												<h2>成年</h2> : 
												<h2>未成年</h2>
										}
							</div>
						</div>
						
			ReactDOM.render(div, document.querySelector("#app"))
		</script>
	</body>
</html>